import React, { useState, useRef } from 'react';
import classNames from 'classnames';
import {
    Link,
    useLocation,
    useNavigate,
    createSearchParams,
} from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import App from 'app';
import { useIsXLScreen, isZH } from 'components/hooks';
import useFormStore from 'src/context/usetypeformstore';
import './style.scss';

const Head = (props) => {
    const { t, i18n } = useTranslation('home', { keyPrefix: 'head' });
    const isXLScreen = useIsXLScreen();
    const bp = !isXLScreen;
    const navigate = useNavigate();
    const location = useLocation();
    const [lang, setLang] = useState(i18n.language);
    const [languageTriger, setLanguageTriger] = useState(false);
    const buttonRef = useRef(null);

    const state = useFormStore();
    const selectedType = state.selectedType;
    const { setSelectedType } = useFormStore();
    const { assetsURL } = App;

    // console.log(App);

    const logo =
        'https://img.alicdn.com/imgextra/i4/O1CN01Dc8pgI1RHRHi2YabD_!!6000000002086-55-tps-30-24.svg';

    const changeLanguageHandler = () => {
        if (!languageTriger) {
            setLanguageTriger(true);
            const lang = isZH(i18n.language) ? 'en' : 'zh';
            setLang(lang);
            navigate({
                pathname: location.pathname,
                hash: location.hash,
                search: `?${createSearchParams({ lng: lang })}`,
            });
            setTimeout(() => {
                setLanguageTriger(false);
            }, 500);
        }
    };

    const changeen = () => {
        setLang('en');
        navigate({
            pathname: location.pathname,
            hash: location.hash,
            search: `?${createSearchParams({ lng: 'en' })}`,
        });
    };
    const changezh = () => {
        setLang('zh');
        navigate({
            pathname: location.pathname,
            hash: location.hash,
            search: `?${createSearchParams({ lng: 'zh' })}`,
        });
    };

    const list = [
        {
            title: '工作台',
            icon: (
                <img
                    src="https://img.alicdn.com/imgextra/i1/O1CN01ltc9ZL1QEP2mab9ai_!!6000000001944-55-tps-20-20.svg"
                    alt=""
                />
            ),
            type: 'all',
        },
        {
            title: '图片生成',
            icon: (
                <img
                    src="https://img.alicdn.com/imgextra/i3/O1CN01Ffpui41Olicg82xr8_!!6000000001746-55-tps-20-20.svg"
                    alt=""
                />
            ),
            type: 'image',
        },
        {
            title: '视频生成',
            icon: (
                <img
                    src="https://img.alicdn.com/imgextra/i4/O1CN01fbRkc41q8c2wYQJrF_!!6000000005451-55-tps-20-20.svg"
                    alt=""
                />
            ),
            type: 'video',
        },
    ];

    return (
        <div
            className={classNames('home_page-head', {
                'home_page-head-close': selectedType != 'all',
            })}
        >
            <div className="home_page-head-top">
                <div className="home_page-logo">
                    <img className={'home_page-logo-img'} src={logo} alt="" />
                    <div className="home_page-logo-img-text-overflow">
                        <img
                            className={'home_page-logo-img-text'}
                            src={assetsURL + 'images/MoovaMark.svg'}
                        />
                    </div>
                </div>

                <ul className={'home_page-menu-list'}>
                    {list.map((item, index) => (
                        <li
                            key={index}
                            className={
                                item.type == selectedType ? 'active' : ''
                            }
                            onClick={() => {
                                setSelectedType(item.type);
                            }}
                        >
                            {item.icon} <p>{item.title}</p>
                        </li>
                    ))}
                </ul>
            </div>

            <div className="home_page-head-bottom">
                {/* <div
                    className={classNames('language-button')}
                    // onClick={() => changeLanguageHandler()}
                    ref={buttonRef}
                >
                    <p
                        className={classNames('menu__lang-button--left', {
                            'lang-button-active': lang === 'en',
                        })}
                        onClick={() => changeen()}
                    >
                        {t('language')[0]}
                    </p>
                    <span>/</span>
                    <p
                        className={classNames('menu__lang-button--right', {
                            'lang-button-active': lang === 'zh',
                        })}
                        onClick={() => changezh()}
                    >
                        {t('language')[1]}
                    </p>
                </div> */}

                {/* <div className="user-avatar">
                    <p className="head-img">Y</p>
                    <p className="head-name">XXX</p>
                </div> */}
                <div className="head-bottom-logo">
                    <p>Powered by</p>
                    <img
                        src="https://img.alicdn.com/imgextra/i2/O1CN01wE8fRd27cF8cJHnIg_!!6000000007817-55-tps-147-16.svg"
                        alt=""
                    />
                </div>
            </div>
        </div>
    );
};

export default Head;
